<template>
  <div>
    <MusicListTop v-if="state.playList.creator != null" :playList="state.playList"></MusicListTop>
    <MusicListItem v-if="state.playList.subscribedCount != null" :MusicListDetail="state.MusicListDetail" :subscribedCount="state.playList.subscribedCount"></MusicListItem>
  </div>
</template>

<script>
import { useRoute } from 'vue-router';
import { onMounted, reactive } from 'vue';
import { reqMusicListDetail, reqMusicListAllMusic } from '@/api/requests/musicListDetail'
import MusicListTop from '@/components/MusicList/MusicListTop'
import MusicListItem from '@/components/MusicList/MusicListItem'
export default {
  setup() {
    const state = reactive({
      playList: {}, //歌单的描述
      MusicListDetail: [] //歌单的歌曲
    })

    onMounted(async () => {
      let id = useRoute().query.id
      // 获取歌单详情 
      let result = await reqMusicListDetail(id)
      // 获取歌单所有歌曲
      let MusicListResult = await reqMusicListAllMusic(id)

      state.MusicListDetail = MusicListResult.data.songs
      state.playList = result.data.playlist
      // 防止页面刷新，数据丢失（因为网速太慢），把数据放到sessionStroage
      // sessionStorage.setItem('itemDetail', JSON.stringify(state))
    })

    return { state }
  },
  components: {
    MusicListTop,
    MusicListItem,
  }
}
</script>

<style>
</style>